<template>
  <div class="layout-pd">
    <div class="container">
      <div class="base-info">
        <div class="title">基础信息</div>
        <div class="infos">
          <div class="key-val">
            <div class="key">姓名</div>
            <div class="val">
              <el-input v-model="formModel1.user_name" />
            </div>
          </div>
          <div class="key-val">
            <div class="key">城市</div>
            <div class="val">
              <el-input v-model="formModel1.city" />
            </div>
          </div>
          <div class="key-val">
            <div class="key">公司名称</div>
            <div class="val">
              <el-input v-model="formModel1.company" />
            </div>
          </div>
          <div class="key-val">
            <div class="key">电话</div>
            <div class="val">
              <el-input v-model="formModel1.phone" />
            </div>
          </div>
          <div class="key-val">
            <div class="key">邮箱</div>
            <div class="val">
              <el-input v-model="formModel1.email" />
            </div>
          </div>
          <div class="key-val">
            <div class="key">预估下单周期</div>
            <div class="val">
              <el-date-picker v-model="formModel1.estimated_order_time" type="datetime"
                value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%;" placeholder="选择日期时间">
              </el-date-picker>
            </div>
          </div>
          <div class="key-val">
            <div class="key">行业</div>
            <div class="val">
              <el-input v-model="formModel1.industry" />
            </div>
          </div>
          <div class="key-val">
            <div class="key">需求为何不能满足</div>
            <div class="val">
              <el-input v-model="formModel1.demand_desc" />
            </div>
          </div>
          <div class="key-val">
            <div class="key">需求解决方案</div>
            <div class="val">
              <el-input v-model="formModel1.requirement_solution" />
            </div>
          </div>
          <div class="key-val">
            <div class="key">线索类型</div>
            <div class="val">
              <el-select v-model="formModel1.lead_type" style="width: 100%" placeholder="请选择" clearable filterable>
                <el-option v-for="item in state.clueTypeArr" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </div>
          </div>
          <div class="key-val">
            <div class="key">是否报价</div>
            <div class="val">
              <el-radio-group v-model="formModel1.quotation_situation" disabled>
                <el-radio :label="1">已报价</el-radio>
                <el-radio :label="2">未报价</el-radio>
              </el-radio-group>
            </div>
          </div>

          <div class="key-val">
            <div class="key">线索文件</div>
            <div class="val">
              <UploadFile v-model="formModel1.files" :value="formModel1.files" @uploadfile="onUploadHead" :isImg="false"
                :limit="9" />
            </div>
          </div>
          <div class="key-val key-val-status">
            <div class="key">线索状态</div>
            <div class="val">
              <el-radio-group v-model="formModel1.status">
                <el-radio v-for="(item, index) in state.clueStatusArr" :key="index" :label="item.value">
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
        <div class="infos-button">
          <el-button type="primary" class="inquiry-btn" @click="userInfoClick">确认</el-button>
        </div>
        <div class="tops">
          <div class="key-val"></div>
          <div class="title">销售打标</div>
          <div class="sales">
            <div class="key-val">
              <div class="key">线索评级</div>
              <div class="val flex_cen">
                <div class="val1" v-for="(item, index) in arrOne"
                  :class="[formModel1.rating == item.value ? 'active-val1' : '']" :key="index"
                  @click="clickVal1(item.value)">{{ item.label }}</div>
              </div>
            </div>

            <!-- <div class="key-val">
              <div class="key">是否首次回复</div>
              <div class="val">
                <el-select v-model="formModel1.bbbbbb" placeholder="请选择" clearable style="width: 100%;">
                  <el-option  v-for="item in state.yesOrno" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
            </div>
            <div class="key-val">
              <div class="key">客户收费类别</div>
              <div class="val">
                <el-select v-model="formModel1.cccccc" placeholder="请选择" clearable style="width: 100%;">
                  <el-option  v-for="item in state.yesOrno" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
            </div>
            <div class="key-val">
              <div class="key">下单周期</div>
              <div class="val">
                <el-select v-model="formModel1.dddddd" placeholder="请选择" clearable style="width: 100%;">
                  <el-option  v-for="item in state.yesOrno" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
            </div>
            <div class="key-val">
              <div class="key">类型</div>
              <div class="val">
                <el-select v-model="formModel1.dddddd" placeholder="请选择" clearable style="width: 100%;">
                  <el-option  v-for="item in state.yesOrno" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
            </div>
            <div class="key-val">
              <div class="key">客户标签</div>
              <div class="val">
                <el-select v-model="formModel1.dddddd" placeholder="请选择" clearable style="width: 100%;">
                  <el-option  v-for="item in state.yesOrno" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
            </div>
            <div class="key-val">
              <div class="key">行业</div>
              <div class="val">
                <el-select v-model="formModel1.dddddd" placeholder="请选择" clearable style="width: 100%;">
                  <el-option  v-for="item in state.yesOrno" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
            </div>
            <div class="key-val">
              <div class="key">细分行业</div>
              <div class="val">
                <el-input v-model="formModel1.dddddd" />
              </div>
            </div> -->
          </div>
          <div class="key-file">
            <div class="title">PDF/图片/文件(可下载)</div>
            <div class="files-list" v-for="files in formModel1.files" :key="files.id"
              @click="downloadFile(files.url, files.name)">
              文件名称：{{ files.name }}
              <el-icon class="cursors">
                <UploadFilled />
              </el-icon>
            </div>
          </div>
          <div class="price-inquiry">
            <div class="inquiry-title">
              <div class="title">询单报价</div>
              <div class="title-ri">
                <el-button type="primary" class="inquiry-btn" @click="exportCon"
                  v-if="auth(state.exportAuth)">导出</el-button>
              </div>
            </div>
            <YxTable :header-cell-style="{ background: '#f5f7fa' }" border :selection="false" :isSerialNum="false"
              :data="formModel1.files" :columnData="state.inquiryData" :isPage="false" :showOperator="true">
              <!-- 工艺 -->
              <template v-slot:craft="{ row }">
                <el-input type="text" v-model="row.craft" class="edit-input" v-if="row.isEditing" />
                <span v-else>{{ row.craft }}</span>
              </template>

              <!-- 数量列 -->
              <template v-slot:quantity="{ row }">
                <el-input type="text" v-model="row.quantity" class="edit-input" v-if="row.isEditing" />
                <span v-else>{{ row.quantity }}</span>
              </template>

              <!-- 单价列 -->
              <template v-slot:unit_price="{ row }">
                <el-input type="text" v-model="row.unit_price" class="edit-input" v-if="row.isEditing" />
                <span v-else>{{ row.unit_price }}</span>
              </template>

              <!-- 运费列 -->
              <template v-slot:freight="{ row }">
                <el-input type="text" v-model="row.freight" class="edit-input" v-if="row.isEditing" />
                <span v-else>{{ row.freight }}</span>
              </template>

              <!-- 总价列 -->
              <template v-slot:total_price="{ row }">
                <el-input type="text" v-model="row.total_price" class="edit-input" v-if="row.isEditing" />
                <span v-else>{{ row.total_price }}</span>
              </template>
              <!-- 币种 -->
              <template v-slot:currency_list="{ row }">
                <el-select v-if="row.isEditing" v-model="row.currency_id" @change="onCurrencyChange(row)"
                  placeholder="请选择">
                  <el-option v-for="item in row.currency_list" :key="item.id" :label="item.currency_name"
                    :value="item.id" />
                </el-select>
                <span v-else>{{row.currency_id ? row.currency_list.find(item => item.id ===
                  row.currency_id)?.currency_name : ''}}</span>
              </template>

              <!-- 操作列 -->
              <template v-slot:operate="{ row, $index }">
                <el-button type="primary" class="inquiry-btn" @click="handleInquiry(row, $index)">
                  {{ row.isEditing ? '保存' : '询价' }}
                </el-button>
              </template>
            </YxTable>
          </div>
        </div>
      </div>
      <div class="sales-mark">
        <div class="centers">
          <div class="lefts">
            <div class="ones">
              <div class="title">添加跟进记录 {{ formModel1.order_number }}</div>
              <!-- 外层包一个 el-form，不破坏原有结构 -->
              <el-form :model="formModel1" :rules="formRules" ref="followFormRef">
                <div class="conts2">
                  <div class="key">跟进内容</div>
                  <!-- 用 el-form-item 包裹，实现必填验证 -->
                  <el-form-item prop="content">
                    <el-input class="mt5" v-model="formModel1.content" type="textarea" placeholder="备注..." />
                  </el-form-item>

                  <!-- 实际跟进时间 + 下次跟进时间 -->
                  <div class="flex_cen">
                    <div class="key-val mt10 flex1 mr10">
                      <div class="key">实际跟进时间</div>
                      <div class="val mt5">
                        <el-date-picker v-model="formModel1.follow_time" type="datetime"
                          value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%;" disabled placeholder="选择日期时间" />
                      </div>
                    </div>

                    <!-- 下次跟进时间 -->
                    <el-form-item prop="next_follow_time" class="flex1 mr10"
                      style="display: flex; flex-direction: column;">
                      <div class="key-val mt10" style="width: 100%;">
                        <div class="key">下次跟进时间</div>
                        <div class="val mt5">
                          <el-date-picker v-model="formModel1.next_follow_time" type="datetime"
                            value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%;margin-top: -21px;"
                            placeholder="选择日期时间" />
                        </div>
                      </div>
                    </el-form-item>
                  </div>

                  <!-- 跟进方式 -->
                  <el-form-item prop="method">
                    <div class="key-val mt10" style="width: 100%;">
                      <div class="key">跟进方式</div>
                      <div class="val mt5 flex_cen_bet">
                        <!-- 用 div.flex1 包裹 el-select，让它占满剩余空间 -->
                        <div class="flex1">
                          <el-select v-model="formModel1.method" placeholder="请选择" clearable style="width: 100%;">
                            <el-option v-for="item in state.methodArr" :key="item.value" :label="item.label"
                              :value="item.value" />
                          </el-select>
                        </div>
                        <!-- 按钮固定宽度，不参与拉伸 -->
                        <el-button class="ml10" type="primary" @click="submitFn">确认</el-button>
                      </div>
                    </div>
                  </el-form-item>
                </div>
              </el-form>
            </div>
          </div>
          <div class="rights mt20">
            <div class="title">跟进记录</div>
            <!-- <div class="flex_cen">
              <el-input class="flex1 mr10" v-model="formModel1.bbbbbb" placeholder="搜索跟进记录" />
              <el-select class="flex1 mr10" v-model="formModel1.bbbbbb" placeholder="有无To-Do" clearable>
                <el-option v-for="item in state.yesOrno" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
              <el-select class="flex1" v-model="formModel1.bbbbbb" placeholder="有无附件" clearable>
                <el-option v-for="item in state.yesOrno" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
            <div class="flex_cen mt10">
              <div  class="flex1 mr10">
                <el-select v-model="formModel1.bbbbbb" placeholder="跟进状态" clearable style="width: 100%;">
                  <el-option v-for="item in state.yesOrno" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
              <div  class="flex1 mr10">
                <el-date-picker
                  v-model="formModel1.bbbbbb" 
                  style="width: 100%;"
                  type="datetime" 
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="跟进开始时间">
                </el-date-picker>
              </div>
              <div  class="flex1">
                <el-date-picker
                  v-model="formModel1.bbbbbb" 
                  style="width: 100%;"
                  type="datetime" 
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="跟进结束时间">
                </el-date-picker>
              </div>
            </div>
            <div class="flex_cen_end mt5">
              <el-button class="ml10" type="primary">搜索</el-button>
            </div> -->
            <div class="records">
              <YxTable :header-cell-style="{ background: '#f5f7fa' }" border :selection="false" :isSerialNum="false"
                :data="formModel1.list" :columnData="state.columnData" :isPage="false" :showOperator="false">
                <template v-slot:method="{ row }">
                  <span>{{ showInfo(row.method, methodArr) }}</span>
                </template>
                <template v-slot:rating="{ row }">
                  <span>{{ showInfo(row.rating, arrOne) }}</span>
                </template>
              </YxTable>
            </div>
          </div>
        </div>
      </div>
    </div>
    <AddClue ref="addClueRef" @updateList="getData"></AddClue>
    <!-- 合同 -->
    <div id="contractId" class="tract-class">
      <img class="logo1" src="../../../assets/img/logo2.png" alt="" />
      <div class="name">深圳润洲启寰技术有限公司</div>
      <div class="title">3D打印生产合同</div>
      <div class="flex_cen_bet">
        <div class="textleft">甲方名称: {{ formModel1.files && formModel1.files.length > 0 ? formModel1.files[0].name : ''
        }}
        </div>
        <div class="textleft">合同编号: </div>
      </div>
      <div class="flex_cen_bet">
        <div class="textleft">编号: </div>
        <div class="textleft">签订地点: </div>
      </div>
      <div class="flex_cen_bet">
        <div class="textleft"></div>
        <div class="textleft">签订时间: </div>
      </div>
      <div class="pro-info pro-top">
        <div class="info-til">一、产品信息：</div>
        <div class="info-head flex_cen">
          <div class="itm-head">文件</div>
          <div class="itm-head flex1">工艺</div>
          <div class="itm-head">数量</div>
          <div class="itm-head">单价(元/套)</div>
          <div class="itm-head">运费</div>
          <div class="itm-head">总金额(元)</div>
          <div class="itm-head borgt1">币种</div>
        </div>
        <div class="info-tr flex_cen" v-for="componentData in formModel1.files" :key="componentData.id">
          <div class="itm-tr botop0 text-wrap">{{ componentData.name }}</div>
          <div class="itm-tr flex1 botop0">{{ componentData.craft }}</div>
          <div class="itm-tr botop0">{{ componentData.quantity }}</div>
          <div class="itm-tr botop0">{{ componentData.unit_price }}</div>
          <div class="itm-tr botop0">{{ componentData.freight }}</div>
          <div class="itm-tr botop0">{{ componentData.total_price }}</div>
          <div class="itm-tr borgt1 botop0">{{componentData.currency_id ? componentData.currency_list.find(item =>
            item.id
            ===
            componentData.currency_id)?.currency_name : ''}}</div>
        </div>
        <div class="total">总计: {{ formModel1.file_price }}</div>
        <div class="total">合计金额（大写）: {{ formModel1.great }}</div>
      </div>
      <div class="qual-requir pro-top">
        <div class="qua-til"><span class="blod">二、质量要求技术标准：</span>符合下述技术要求</div>
        <div class="qua-conts">
          <div class="mrg5">1.按照甲方提供的《技术质量协议》；</div>
          <div class="mrg5">2.按照甲方提供的图纸要求；</div>
          <div class="mrg5">3.材料选择：</div>
          <div class="mrg5">4.未明确事项均按相关国家标准执行。</div>
          <div class="mrg5">5.报价不包含运输费用以及专票费用。</div>
        </div>
      </div>
      <div class="adess flex_cen pro-top">
        <div class="blod">三、交（提）货地点、方式：</div>
        <div></div>
      </div>
      <div class="adess flex_cen pro-top">
        <div class="blod">四、运输方式及到达站港和费用负担：</div>
        <div>快递至甲方所在地，费用由甲方承担。</div>
      </div>
      <div class="adess flex_cen pro-top">
        <div class="blod">五、包装标准及费用负担：</div>
        <div>包装方式需保障运输过程不会损坏产品外观和尺寸；费用由乙方承担。</div>
      </div>
      <div class="adess flex_cen pro-top">
        <div class="blod">六、结算方式及验收：</div>
        <div>合同签订一次性付清全款。如产品数量及质量不符合约定，可在签收后3日内提出异议，逾期未提出视为验收合格</div>
      </div>
      <div class="adess flex_cen pro-top">
        <div class="blod">七、违约责任：</div>
        <div>未尽事宜双方协商解决。</div>
      </div>
      <div class="adess flex_cen pro-top">
        <div class="blod">八、解决合同纠纷的方式：</div>
        <div>依据《合同法》协商解决。</div>
      </div>
      <div class="adess flex_cen pro-top">
        <div class="blod">九、其它约定事项：</div>
        <div>无。</div>
      </div>
      <div class="files">
        <div class="file-til pro-top">本合同传真件及扫描件具有同等法律效应。</div>
        <div class="files-table">
          <div class="flex_cen_bet">
            <div class="borders borigt0">甲方</div>
            <div class="borders">乙方</div>
          </div>
          <div class="flex_cen_bet">
            <div class="borders borigt0">单位名称: (章)： {{ formModel1.invoice?.company_name }}</div>
            <div class="borders">单位名称: (章)深圳市润洲启寰技术有限公司</div>
          </div>
          <div class="flex_cen_bet">
            <div class="borders borigt0">单位地址：{{ formModel1.invoice?.address }}
            </div>
            <div class="borders">单位地址：深圳市粤海街道51大厦306</div>
          </div>
          <div class="flex_cen_bet">
            <div class="borders borigt0">法定代表人： {{ formModel1.invoice?.username }}</div>
            <div class="borders">法定代表人：范达理</div>
          </div>
          <div class="flex_cen_bet">
            <div class="borders borigt0">委托代理人：</div>
            <div class="borders">委托代理人：</div>
          </div>
          <div class="flex_cen_bet">
            <div class="borders borigt0">电话：{{ formModel1.invoice?.phone }}</div>
            <div class="borders">电话：18923498663</div>
          </div>
          <div class="flex_cen_bet">
            <div class="borders borigt0">税号：{{ formModel1.invoice?.tax_id }}</div>
            <div class="borders">税号：91440300MAEFBNYM5J</div>
          </div>
          <div class="flex_cen_bet">
            <div class="borders borigt0">开户银行：{{ formModel1.invoice?.bank_name }}</div>
            <div class="borders">开户银行：招商银行股份优先公司深圳四海支行</div>
          </div>
          <div class="flex_cen_bet">
            <div class="borders borigt0">账号：{{ formModel1.invoice?.bank_account }}</div>
            <div class="borders">账号：755978512210001</div>
          </div>
          <div class="flex_cen_bet">
            <div class="borders borigt0 borbom1">户名：</div>
            <div class="borders borbom1">户名：深圳润洲启寰技术有限公司</div>
          </div>
        </div>

        <div class="chapter">
          <img src="../../../assets/img/chapter.png" alt="" class="chapter-img" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="clueManageIndex">
import { ElMessage } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'
import { auth } from '/@/utils/authFunction';
import { yesOrno, methodArr, arrOne, clueTypeArr, navArr } from '/@/commmon/variate';
import { followUpDetail, addfollowup, addQuotation } from '/@/api/startfab/index';
import { updateSalesLeads } from '/@/api/project/index';
import { useRoute } from 'vue-router';
import { columnDataGjin, inquiryDataGjin } from '/@/commmon/column';
import { defineAsyncComponent, reactive, ref, onMounted } from 'vue';
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
const YxTable = defineAsyncComponent(() => import('/@/components/YxTable/index.vue'))
const AddClue = defineAsyncComponent(() => import('/@/views/startfab/clueManage/addClue.vue'));
const UploadFile = defineAsyncComponent(() => import('/@/components/Upload/file.vue'));

const route = useRoute();
const addClueRef = ref();
const state = reactive({
  exportAuth: 'admin:admin:clueManageExport',
  clueStatusArr: navArr.slice(1),
  clueTypeArr: clueTypeArr,
  yesOrno: yesOrno,
  methodArr: methodArr,
  arrOne: arrOne,
  columnData: columnDataGjin,
  inquiryData: inquiryDataGjin,
  selectedCurrency: ''
})
const formRules = {
  content: [
    { required: true, message: '请输入跟进内容', trigger: 'blur' }
  ],
  // next_follow_time: [
  //   { required: true, message: '请选择下次跟进时间', trigger: 'change' }
  // ],
  method: [
    { required: true, message: '请选择跟进方式', trigger: 'change' }
  ]
}

// 暴露给模板使用的 ref
const followFormRef = ref(null)
const formModel1 = ref({
  rating: 4,
})
const clickVal1 = (val) => {
  formModel1.value.rating = val
}
const showInfo = (filed, arr) => {
  const itemData = arr.find((item) => item.value === filed)
  return itemData && itemData.label ? itemData.label : filed
}
const getData = async () => {
  const res = await followUpDetail({ id: route.query.id })
  if (res.code == 10000) {
    formModel1.value = res.data;
  }
}
const submitFn = () => {
  // 调用验证
  followFormRef.value.validate(async (valid) => {
    if (valid) {
      const res = await addfollowup({ ...formModel1.value })
      if (res.code == 10000) {
        getData()
      }
    } else {
      ElMessage.error('请填写必填项！')
    }
  })
}
// 可选：监听货币选择变化
const onCurrencyChange = (row) => {
  console.log('当前行选择的货币 ID:', row.currency_id);
  // 可用于触发汇率加载、金额转换等
  state.selectedCurrency = row.currency_id;
}
const handleInquiry = async (row, index) => {
  // row.isEditing = !row.isEditing;

  if (row.isEditing) {
    const lead_id = formModel1.value.lead_id;
    const file_number = index;

    const res = await addQuotation({ ...row, file_number, lead_id, currency_id: state.selectedCurrency });

    console.log(res, "res+++保存");
    row.isEditing = false;
    ElMessage.success('保存成功');
  } else {
    row.isEditing = true;
    console.log("询价");
  }
}
const userInfoClick = async () => {
  console.log(formModel1.value, "formModel1.value");
  const res = await updateSalesLeads({ ...formModel1.value });
  if (res.code === 10000) {
    ElMessage.success('修改成功');
  }
}
function downloadFile(url, filename) {
  const anchor = document.createElement('a');
  anchor.href = url;
  anchor.download = filename || 'download';
  document.body.appendChild(anchor);
  anchor.click();
  document.body.removeChild(anchor);
}
const onUploadHead = (data) => {
  console.log(data, "data");
  const arrS = JSON.parse(JSON.stringify(formModel1.value.files))
  const arrN = []
  if (data.length) {
    data.forEach((itom) => {
      console.log(itom, "0000000");
      const resData = itom.response;
      console.log(resData, "resData");
      if (resData && resData.data.length) {
        resData.data.forEach((item) => {
          console.log(item, "item+++");
          arrN.push({
            name: item.name,
            url: item.oss_upload_files_path
          })
        })
      }
    })
    formModel1.value.files = arrS.concat(arrN)
    console.log(formModel1.value.files, "formModel1.value.files");
  }
}
// 询单导出

const exportCon = () => {
  console.log('触发询单导出事件');
  dowloadTem('contractId', '合同.pdf')
}
const dowloadTem = async (temId, temName) => {
  const element = document.getElementById(temId);
  // 使用 html2canvas 将 DOM 转换为 canvas
  const canvas = await html2canvas(element, {
    scale: 2, // 提高清晰度
    useCORS: true, // 支持跨域图片
    logging: false
  })
  const imgWidth = 210 // A4 纸宽度（mm）
  const pageHeight = 297 // A4 纸高度
  const imgHeight = (canvas.height * imgWidth) / canvas.width
  let heightLeft = imgHeight
  const contentDataURL = canvas.toDataURL('image/png')
  const pdf = new jsPDF('p', 'mm', 'a4')
  let position = 0
  pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
  heightLeft -= pageHeight
  while (heightLeft >= 0) {
    position = heightLeft - imgHeight
    pdf.addPage()
    pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
    heightLeft -= pageHeight
  }
  pdf.save(temName)
}
onMounted(() => {
  getData()
})
</script>

<style scoped lang="scss">
.flex_cen {
  display: flex;
  align-items: center;
}

.flex_cen_bet {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex_cen_end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.mt20 {
  margin-top: 20px;
}

.mt10 {
  margin-top: 10px;
}

.mt5 {
  margin-top: 5px;
}

.flex3 {
  flex: 3;
}

.flex1 {
  flex: 1;
}

.flex6 {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.flex2 {
  flex: 2;
}

.mr10 {
  margin-right: 10px;
}

.ml10 {
  margin-left: 10px;
}

.container {
  background: #FFFFFF;
  padding: 15px;
  display: flex;

  .base-info,
  .sales-mark {
    width: 50%;
    flex: 1;
    border: 1px solid #eee;
    padding: 15px;

    .title {
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 15px;
    }

    .infos,
    .sales {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .key-val {
        width: calc(50% - 10px);
        margin-bottom: 10px;
        margin-right: 10px;

        .key {
          height: 22px;
          line-height: 22px;
          margin-bottom: 10px;

          .el-checkbox {
            height: 22px;
            line-height: 22px;
          }
        }

        .val1 {
          transition: 0.5s;
          width: 30px;
          height: 32px;
          line-height: 32px;
          font-size: 13px;
          color: #00c282;
          border: 1px solid #00c282;
          margin-right: 10px;
          text-align: center;
          border-radius: 5px;
          cursor: pointer;
        }

        .active-val1 {
          background: #00C282;
          color: #FFFFFF;
        }
      }

      .key-val-status {
        width: 100%;
      }
    }

    .infos-button {
      width: 100%;
      margin: 0 auto;
      margin-bottom: 15px;

      .inquiry-btn {
        width: 100%;
      }
    }

    .key-pdf,
    .key-file,
    .price-inquiry {
      margin-top: 10px;
    }

    .inquiry-title {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title-ri {
        margin-bottom: 8px;

        .inquiry-btn {
          height: 30px;
        }
      }
    }

    .files-list {
      cursor: pointer;
      margin-top: 10px;
    }

    .centers {
      width: 100%;

      .lefts,
      .rights {
        .title {
          font-size: 14px;
          font-weight: bold;
          margin-bottom: 15px;
        }

        .conts1 {
          .attachment {
            margin-top: 10px;
          }
        }
      }
    }
  }

  .base-info {
    margin-right: 20px;
  }

  ::v-deep .key {
    .el-checkbox {
      height: 16px;
      line-height: 16px;
    }
  }

  .submit {
    background: rgba(37, 73, 217, 1);
  }

  .records {
    margin-top: 10px;
  }
}

.tract-class {
  width: 100%;
  box-sizing: border-box;
  position: fixed;
  top: -9999;
  right: -9999;
  z-index: -9999;
  padding: 20px 80px 50px 80px;

  .blod {
    font-weight: bold;
  }

  .logo1 {
    display: block;
    width: 500px;
    height: 120px;
    margin: 0 auto;
  }

  .name {
    font-size: 30px;
    text-align: center;
    font-weight: bold;
    margin: 10px 0px;
  }

  .title {
    font-size: 24px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .textleft {
    flex: 1;
    text-align: left;
    margin: 5px 0px;
  }

  .pro-top {
    margin-top: 10px;
  }

  .pro-info {
    .info-til {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .info-head,
    .info-tr {
      height: 40px;

      .itm-head,
      .itm-tr {
        height: 100%;
        flex: 0.8;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid;
        border-right: 0px;
      }

      .text-wrap {
        word-break: break-all;
        overflow-wrap: break-word;
        max-height: 60px;
        overflow: hidden;
      }

      .flex1 {
        flex: 1;
      }

      .borgt1 {
        border-right: 1px solid;
      }

      .botop0 {
        border-top: 0px;
      }
    }

    .total {
      height: 40px;
      line-height: 40px;
      border: 1px solid;
      border-top: 0px;
      padding-left: 10px;
    }
  }

  .qual-requir {
    margin-top: 10px;

    .qua-til {
      font-size: 20px;
    }

    .qua-conts {
      padding-left: 50px;

      .mrg5 {
        margin-top: 10px;
        font-size: 20px;
      }
    }
  }

  .adess {
    font-size: 20px;
    margin-top: 10px;
  }

  .files {
    margin-top: 10px;
    position: relative;

    .file-til {
      font-size: 20px;
      font-weight: bold;
    }

    .files-table {
      margin-top: 10px;

      .borders {
        flex: 1;
        height: 40px;
        line-height: 40px;
        border: 1px solid;
        padding-left: 10px;
        border-bottom: 0px;
      }

      .borigt0 {
        border-right: 0px;
      }

      .borbom1 {
        border-bottom: 1px solid;
      }
    }

    .chapter {
      margin-top: 10px;
      position: absolute;
      right: 20%;
      bottom: 5%;
      width: 250px;
      height: 250px;

      .chapter-img {
        width: 100%;
        height: 100%;
      }
    }
  }

}
</style>
